<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Login</title>
        <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
        <%= stylesheet_link_tag "/stylesheets/blue.css" %>
        <%= stylesheet_link_tag "/stylesheets/Multiselect.css" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/prototype.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/scriptaculous.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/effects.js" %>
        <%= javascript_include_tag "/javascripts/ext/adapter/prototype/ext-prototype-adapter.js" %>
        <%= javascript_include_tag "/javascripts/ext/ext-all-debug.js" %>
        <%= javascript_include_tag "/javascripts/ext/build/locale/ext-lang-zh_CN.js" %>
        <%= javascript_include_tag "/javascripts/Multiselect.js" %>
        <%= javascript_include_tag "/javascripts/DDView.js" %>
    </head>
    <body>
        <script>
            Ext.onReady(function(){
                /*
                 * Ext.ux.Multiselect Example Code
                 */
                var formMultiselect = new Ext.form.FormPanel({
                    labelWidth: 75,
                    labelAlign: "right",
                    width: 700,
                    items: [{
                        xtype: "multiselect",
                        fieldLabel: "Multiselect",
                        name: "multiselect",
                        dataFields: ["code", "desc"],
                        data: [[123, "One Hundred Twenty Three"], ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"], ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
                        valueField: "code",
                        displayField: "desc",
                        width: 250,
                        height: 200,
                        allowBlank: true,
                        legend: "Multiselect",
                        tbar: [{
                            text: "clear",
                            handler: function(){
                                formMultiselect.getForm().findField("multiselect").reset();
                            }
                        }]
                    }],
                    buttons: [{
                        text: "Get Value",
                        handler: function(){
                            alert(formMultiselect.getForm().getValues(true));
                        }
                    }, {
                        text: "Set Value (2,3)",
                        handler: function(){
                            formMultiselect.getForm().findField("multiselect").setValue("2,3");
                        }
                    }, {
                        text: "Mark Invalid",
                        handler: function(){
                            formMultiselect.getForm().findField("multiselect").markInvalid("Invalid");
                        }
                    }, {
                        text: "Toggle Enabled",
                        handler: function(){
                            var m = formMultiselect.getForm().findField("multiselect");
                            if (!m.disabled) 
                                m.disable();
                            else m.enable();
                        }
                    }, {
                        text: "Reset",
                        handler: function(){
                            formMultiselect.getForm().findField("multiselect").reset();
                        }
                    }]
                });
                formMultiselect.render("form-ct-multiselect");
                
                
                /*
                 * Ext.ux.ItemSelector Example Code
                 */
                var formItemSelector = new Ext.form.FormPanel({
                    labelWidth: 75,
                    width: 700,
                    items: [{
                        xtype: "itemselector",
                        name: "itemselector",
                        imagePath: "/images/multi_select",
                        drawUpIcon: false,
                        drawDownIcon: false,
                        drawLeftIcon: true,
                        drawRightIcon: true,
                        drawTopIcon: false,
                        drawBotIcon: false,
                        fieldLabel: "ItemSelector",
                        dataFields: ["code", "desc"],
                        fromData: [[123, "One Hundred Twenty Three"], ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"], ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
                        toData: [["10", "Ten"]],
                        msWidth: 250,
                        msHeight: 200,
                        valueField: "code",
                        displayField: "desc",
                        //imagePath:"ext-ux/multiselect",
                        //switchToFrom:true,
                        toLegend: "Selected",
                        fromLegend: "Available",
                        toTBar: [{
                            text: "Clear",
                            handler: function(){
                                var i = formItemSelector.getForm().findField("itemselector");
                                i.reset.call(i);
                            }
                        }]
                    }],
                    buttons: [{
                        text: "Get Value",
                        handler: function(){
                            alert(formItemSelector.getForm().getValues(true));
                        }
                    }, {
                        text: "Mark Invalid",
                        handler: function(){
                            formItemSelector.getForm().findField("itemselector").markInvalid("Invalid");
                        }
                    }]
                });
                formItemSelector.render("form-ct-itemselector");
                var teststore = new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: '/admin/getCustomerTypes'
                    }),
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        id: 'id'
                    }, ['id', 'customer_type'])
                })
                
                teststore.on({
                    load: function(){
                        var airports = new Array();
                        var recordCount = teststore.getCount();
                        var records = teststore.getRange(0, (recordCount - 1));
                        var airpirtsStr = "[";
                        for (i = 0; i < recordCount - 1; i++) {
                            //idmsg=ismsg+records[i].data.id;
                            var record = records[i];
                            var id = record.data.id;
                            var customer_type = record.data.customer_type;
                            airpirtsStr = airpirtsStr + "[\""+id+"\",\""+customer_type+"\"] ,";
                            //airports[i][0]=record.data.id;
                            //airports[i][1]=record.data.customer_type;
                            //Ext.MessageBox.alert("提示", records[i].data.id);
                        }
						if (airpirtsStr.length!=1){
							airpirtsStr = airpirtsStr.substr(0,airpirtsStr.length-1); 
						}
						airpirtsStr = airpirtsStr + "]";
                        Ext.MessageBox.alert("提示", airpirtsStr);
                        //Ext.MessageBox.alert("提示", teststore.getCount());
                    }
                });
                teststore.load();
            });
        </script>
        <div id="form-ct-multiselect">
        </div>
        <div id="form-ct-itemselector">
        </div>
		<div id="form-ct-itemselector">
        </div>
    </body>
</html>
